.side-nav {
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 250px;
	background: #FFF;
	position: absolute;
	border-right: 1px solid rgba(0, 0, 0, .075);

	&:lang(fr),
	&:lang(de),
	&:lang(ca) {
		width: 275px;
	}

	.dark & {
		background: #303030;
	}

	button.exit {
		margin: 0;
		width: 100%;
		font: inherit;
		padding: 0 20px;
		font-size: 18px;
		text-align: left;
		line-height: 54px;
		text-transform: none;
		background: rgba(0, 0, 0, .05);
		border-bottom: 1px solid rgba(0, 0, 0, .05);

		.dark & {
			color: #FFF;
			background: rgba(0, 0, 0, .15);
		}

		&:hover {
			background: rgba(0, 0, 0, .075);

			.dark & {
				background: rgba(0, 0, 0, .25);
			}
		}

		&:before {
			vertical-align: top;
		}
	}

	nav {
		overflow: auto;
		padding: 12px 0;
		font-size: 13px;
		height: calc(100% - 55px);

		ul {
			padding: 0;
		}

		li {
			.header {
				color: inherit;
				display: block;
				font-weight: bold;
				line-height: 40px;
				padding: 0 0 0 25px;
				letter-spacing: .2px;
				text-decoration: none;

				&:hover {
					cursor: pointer;
					background: rgba(0, 0, 0, .05);
				}
			}

			a.header {
				&:after {
					@extend [data-m-icon-after]:after;

					opacity: 0;
					float: right;
					font-size: 18px;
					margin-right: 15px;
					content: "open_in_new";
				}

				&:hover:after {
					opacity: .9;
				}
			}

			&.active .header {
				color: $accent-color;
			}
		}

		ul.sections li {
			color: #333;
			line-height: 35px;
			padding-left: 45px;

			.dark & {
				color: #DDD;
			}

			&:hover {
				cursor: pointer;
				background: rgba(0, 0, 0, .05);
			}
		}
	}
}